<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="display:flex;justify-content: center;">
    <div>窗口：<input style="height:15px;" onkeydown="fn1()" onclick="this.select()" /></div>
    <div>坐标系：<input style="height:15px;" onkeydown="fn2()" onclick="this.select()" /></div>
    <svg id="svg" width="500" height="500">
        <circle cx="50" cy="50" r="40" fill="red"/>
    </svg>
</body>
</html>
<script>

    const ns = 'http://www.w3.org/2000/svg' ;
    function createViewBox(x=0,y=0,width=100,height=100 ){
        
        //文字大小比例
        const ratio = height/100 ;
        const svg = document.querySelector('#svg');
        let g = document.querySelector('#g');
        if(g){
            svg.removeChild(g);   
        }


        svg.setAttribute('viewBox',`${x} ${y} ${width} ${height}`) ;
        const h = width/10 ;
        const v = height/10 ;
        g = document.createElementNS(ns,'g');
        g.setAttribute("id","g");
        const children = svg.children;
        if(children.length > 0){
            svg.insertBefore(g,children[0]);
        }else{
            svg.appendChild(g);
        }

        const ds = [] ;
        //画线
        for(let i = 0; i <= 10 ;i++){
            ds.push(`M${i*h} 0V${height}M0 ${i*v}H${width}`);
        }
        const d = ds.join(' ') ;
        const path = document.createElementNS(ns,'path') ;
        path.setAttribute('fill','none');
        path.setAttribute('stroke','#ccc') ;
        path.setAttribute('stroke-width',.5*ratio);
        path.setAttribute('d',d);
        
        const text = document.createElementNS(ns,'text');
        text.innerHTML = `${width} * ${height}`;
        text.setAttribute('font-size',3*ratio);
        text.setAttribute('x',width*0.85);
        text.setAttribute('y',height*.05)

        g.appendChild(path);
        g.appendChild(text);
    }
    createViewBox(0,0,300 ,300);

    function fn2(e){
        e = e||event ;
        if(e.keyCode == 13){
            v = e.target.value
            createViewBox(0,0,`${v}`,`${v}`);
        }
    }

    function fn1(e){
        e = e||event ;
        if(e.keyCode == 13){
            v = e.target.value ;
            const svg = document.querySelector('#svg');
            svg.setAttribute('width',v);
            svg.setAttribute('height',v);
        }
    }

</script>